<template>
  <div id="main" style="width: 100%;height:600px;" ref="chart"></div>
</template>
<!--<script src="../../../utils/echarts/echarts.js"></script>-->
<script>
import { listUserman, getUserman, delUserman, addUserman, updateUserman } from "@/api/frontuser/userman";
export default {
  name: "Userman",
  dicts: ['sys_user_sex', 'user_healthy_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedFrontslave: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户管理表格数据
      usermanList: [],
      // usermanage表格数据
      frontslaveList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:100000,
        uname: null,
        // regtime: null,
        // phone: null,
        // sex: null,
        // idnumber: null,
        // upwd: null,
        // r1: null,
        // r3: null
        status: null,
        nowarea: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户管理列表 */
    getList() {
      this.loading = true;
      listUserman(this.queryParams).then(response => {
        console.log(response.rows)
        this.usermanList = response.rows;
        this.total = response.total;
        var myChart = this.$echarts.init(this.$refs.chart);
        //获得列表数据，分配处理显示数据
        // console.log(this.usermanList.length)
        const date = new Date();
        const year = date.getFullYear();
        let k;
        let dataNumber = [0,0,0,0,0,0,0,0,0,0,0,0]
        for (let i = 1;i<13;i++) {
          if(i < 10){
            k = "-0"+i;
          }else{
            k = "-"+i;
          }
          let str = year+k
          // console.log(str)
          this.usermanList.forEach(function (item) {
             if(item.regtime.indexOf(str) != -1){
               dataNumber[i-1] += 1;
             }
          })
        }
        /*配置项*/
        var option = {
          title: {
            text: 'line'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月',]
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} '
            }
          },
          series: [
            {
              name: '新增用户数量',
              type: 'line',
              data:dataNumber,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            },
          ]
        };
        option && myChart.setOption(option);
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        uid: null,
        uname: null,
        regtime: null,
        phone: null,
        sex: null,
        idnumber: null,
        upwd: null,
        r1: null,
        r3: null
      };
      this.frontslaveList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.uid)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const uid = row.uid || this.ids
      getUserman(uid).then(response => {
        this.form = response.data;
        this.frontslaveList = response.data.frontslaveList;
        this.open = true;
        this.title = "修改用户管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.frontslaveList = this.frontslaveList;
          if (this.form.uid != null) {
            updateUserman(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUserman(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const uids = row.uid || this.ids;
      this.$modal.confirm('是否确认删除用户管理编号为"' + uids + '"的数据项？').then(function() {
        return delUserman(uids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** usermanage序号 */
    rowFrontslaveIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** usermanage添加按钮操作 */
    handleAddFrontslave() {
      let obj = {};
      obj.nativeplace = "";
      obj.nowprovince = "";
      obj.nowcity = "";
      obj.nowarea = "";
      obj.nowaddress = "";
      obj.status = "";
      obj.receivenum = "";
      obj.idfurl = "";
      obj.idburl = "";
      obj.purl = "";
      obj.r1 = "";
      this.frontslaveList.push(obj);
    },
    /** usermanage删除按钮操作 */
    handleDeleteFrontslave() {
      if (this.checkedFrontslave.length == 0) {
        this.$modal.msgError("请先选择要删除的usermanage数据");
      } else {
        const frontslaveList = this.frontslaveList;
        const checkedFrontslave = this.checkedFrontslave;
        this.frontslaveList = frontslaveList.filter(function(item) {
          return checkedFrontslave.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleFrontslaveSelectionChange(selection) {
      this.checkedFrontslave = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('frontuser/userman/export', {
        ...this.queryParams
      }, `userman_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
